<script setup lang="ts">
import myAxios from "../plugins/myAxios.ts";

import 'vant/es/toast/style'
import { ref, onMounted } from "vue";
import {router} from "../main.ts";


// // 定义数据
const user = ref(
    {
        userName: '',
        userAvatar: '',
        userPhone: '',
        userEmail: '',
        userProfile: '',
        gender: '',
        userLevel: 0
    }
);

const activeNames = ref(['1']);

// 向给定ID的用户发起请求
onMounted(() => {
  myAxios.get('/user/search')
      .then(function (response) {
        // 处理成功情况

        console.log(response.data)
        user.value = response.data.data;
        console.log(user.value)
      })
      .catch(function (error) {
        // 处理错误情况
        console.error(error);

      })
})




const hello = () => {
  console.log('hello')
  router.push("/edit/user")
}

const onClickLeft = () => {
  router.push("/user")
}


</script>

<template>

  <!-- 顶部导航栏 -->
  <van-nav-bar title="个人信息"
               class="nav-bar"
  ></van-nav-bar>

  <img src="../assets/最终返回键.png" class="back-btn" @click="onClickLeft" alt="">

  <!-- 登出按钮 -->
<!--  <van-button type="default" round  class="logout-btn" @click="outLogin">-->
<!--    退出登录-->
<!--  </van-button>-->


<!--  <van-button-->
<!--      style="top: 7.5%;"-->
<!--      @click = "hello"-->
<!--      title="修改信息"-->
<!--  >修改信息</van-button>-->




  <div v-if="user" class="userInformationDisplay">

    <img src="../assets/发送.png" class="send-btn">
    <p class="send-text" @click="hello">修改信息</p>
    <!-- 用户头像区域 -->
    <div class="top">

      <van-image
          round
          width="8rem"
          height="8rem"
          fit="cover"
          position="center"
          :src="user.userAvatar"
          class="avatar"
      />
    </div>


    <div class="user-message">
      <!-- 使用列表显示用户信息 -->
      <van-cell-group >
        <van-cell title="用户名" :value="user.userName"/>
        <van-cell title="等级" :value="user.userLevel + '级'"/>
            <van-cell title="性别" :value="user.gender"/>
            <van-cell title="联系电话" :value="user.userPhone"/>
            <van-cell title="邮箱地址" :value="user.userEmail"/>
      </van-cell-group>

      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item title="简介" name="1">
          {{user.userProfile}}
        </van-collapse-item>
      </van-collapse>
    </div>

</div>





  <!--  <div class="userInformationDisplay"-->
  <!--       v-if="user">-->


  <!--    <van-cell-group inset >-->
  <!--      <div class="aaa">-->

  <!--        <van-image :src="user.userAvatar" width="100" height="100" />-->

  <!--      </div>-->


  <!--      <van-cell is-link to="/user/edit"  title="昵称" center :value="user.userName" />-->
  <!--      <van-cell title="简介" center :value="user.userProfile" label="描述信息" />-->


  <!--    </van-cell-group>-->


  <!--  </div>-->


</template>

<style scoped>

.send-btn {
  position: absolute;
  top: 2%;
  width: 28%;
  height: 10%;
  left: 70%;
}
.send-text {
  width: 25%;
  height: 5%;
  position: relative;
  top:6%;
  left:73.5%;
  font-size: 20px;
  font-family: STXingkai,serif  ;
}



.userInformationDisplay {
  flex-direction: column;
  align-items: center;
  margin-top: 10%;
  width: 100%;
  height: 100%;
  background-image: url("../assets/背景111.png");
  background-size: cover;
  background-repeat: no-repeat;

  background-position: center;
  position: relative;

}


.back-btn {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}

.logout-btn {
  position: absolute;
  right: 0;
  top: 6%;
  margin: 10px;
}

.top {
  display: flex;
  justify-content: center;   /* 水平居中 */
  background-image: url("../assets/头像框.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;

  margin: 5% auto;
  border-radius: 50%;
  position: relative;
  z-index: 2;

}


.user-message {
  width: 82%;
  margin: 5% auto;

}
</style>